<template>
  <div class="dy-main SetupDeviceManagement">
    <div class="dy-header">
      <x-header title="设备管理" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <group title="已绑定设备" style="margin-top: .5rem">
        <swipeout>
          <swipeout-item ref="swippeRef" transition-mode="follow" v-for="(item, index) in deviceList" :key="index">
            <div slot="right-menu">
              <swipeout-button type="primary" @click.native="judge(index)">解绑</swipeout-button>
            </div>
            <div slot="content" class="contentItem">
              <div class="left">
                <h3>{{item.termName}}</h3>
                <p>最后登录时间：{{item.lastBindTime}}</p>
              </div>
              <div class="right">
                <strong>已绑定</strong>
              </div>
            </div>
          </swipeout-item>
        </swipeout>
      </group>
    </div>
    <!--<div class="dy-footer"></div>-->
    <div v-transfer-dom>
      <confirm v-model="show"
         title="温馨提示"
         @on-confirm="onConfirm"
         @on-hide="onCancel">
        <p style="text-align:center;">确定要解绑该设备吗？</p>
      </confirm>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      deviceList: [],
      // deviceList: [{
      //   termName: 'OPPO R11',
      //   lastBindTime: '2018.05.12 12:28:10'
      // }, {
      //   termName: 'vivoX9s L',
      //   lastBindTime: '2018.05.12 12:28:11'
      // }, {
      //   termName: 'OPPO R12',
      //   lastBindTime: '2017.06.12 12:28:12'
      // }],
      mobileTerm: '', // 手机设备号
      termSub: null, // 暂存设备数组的下标
      show: false // 控制弹出框
    }
  },
  created () {
    this.getData()
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    getData () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'CI001004_3', 'user_Data': { clientNo: '1010' }}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.deviceList = response.data.data[0].arrays
          } else {
            console.log('fail')
          }
        })
    },

    /**
     * 弹出框显示，并将点击的栏目序号赋给指定值
     * @param index
     */
    judge (index) {
      this.termSub = index // 将序号传入临时的一个值中
      this.show = true // 开启弹出框
    },

    /**
     * 根据序号删除栏目
     */
    onConfirm () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'CI001004_4', 'user_Data': { clientNo: '1010', mobileTerm: '' }}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let i = _this.termSub
            if (i > -1) { // 如果序号正常，则删除该序号对应的栏目
              _this.deviceList.splice(i, 1)
            }
          } else {
            console.log('fail')
          }
        })
    }

  }
}
</script>
<style lang="less">
  .SetupDeviceManagement {
    .dy-body {
      .contentItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .24rem;
        border-bottom: .01rem solid #efefef;
        .left {
          flex: 1;
          h3 {
            font-size: .28rem;
          }
          p {
            font-size: .24rem;
            color: #999;
          }
        }
        .right {
          width: 1.2rem;
          strong {
            font-weight: normal;
            color: #999;
            text-align: center;
          }
        }
      }
      .vux-swipeout-button-primary {
        background-color: #ec1b30;
      }
      .weui-cells__title {
        font-size: .26rem;
      }
    }
    .weui-dialog__btn_primary {
      color: #ec1b30;
    }
  }
</style>
